import React, { Component } from 'react';
import { connect } from 'dva';
import { List, Card, Carousel } from 'antd';
const { Meta } = Card;

const data = [{
  title: 'Title 1',
}, {
  title: 'Title 2',
}, {
  title: 'Title 3',
}, {
  title: 'Title 4',
}, {
  title: 'Title 5',
}, {
  title: 'Title 6',
}];

const tabList = [{
  key: 'tab1',
  tab: '全部',
}, {
  key: 'tab2',
  tab: '美剧',
}, {
  key: 'tab3',
  tab: '韩剧',
}, {
  key: 'tab4',
  tab: '日剧',
}, {
  key: 'tab5',
  tab: '动漫',
}];

export default class Home extends Component {
  state = {
    key: 'tab1',
    noTitleKey: 'article',
  }

  onTabChange = (key, type) => {
    console.log(key, type);
    this.setState({ [type]: key });
  }

  onChange = (a, b, c) => {
    console.log(a, b, c);
  }

  render() {
    return (
      <div>
        
          <Card
            title="我的订阅"
            extra={<a href="#">More</a>}
            style={{ width: '100%' }}
            tabList={tabList}
            onTabChange={(key) => { this.onTabChange(key, 'key'); }}
          >
            <Carousel afterChange={this.onChange} autoplay>
              <List
                grid={{ gutter: 16, column: 6 }}
                dataSource={data}
                renderItem={item => (
                  <List.Item>
                    <Card
                      hoverable
                      cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
                    >
                      <Meta
                        title="标题1"
                        description="备注1"
                      />
                    </Card>
                  </List.Item>
                )}
              />
              <List
                grid={{ gutter: 16, column: 6 }}
                dataSource={data}
                renderItem={item => (
                  <List.Item>
                    <Card
                      hoverable
                      cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
                    >
                      <Meta
                        title="标题2"
                        description="备注2"
                      />
                    </Card>
                  </List.Item>
                )}
              />
            </Carousel>
          </Card>
        <Card
          title="新剧推荐"
          extra={<a href="#">More</a>}
          style={{ width: '100%', marginTop: 20 }}
          tabList={tabList}
          onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }}
        >
          <List
            grid={{ gutter: 16, column: 6 }}
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <Card
                  hoverable
                  cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
                >
                  <Meta
                    title="item.title"
                    description="www.instagram.com"
                  />
                </Card>
              </List.Item>
            )}
          />
        </Card>
        <Card
          title="完结剧集"
          extra={<a href="#">More</a>}
          style={{ width: '100%', marginTop: 20 }}
          tabList={tabList}
          onTabChange={(key) => { this.onTabChange(key, 'noTitleKey'); }}
        >
          <List
            grid={{ gutter: 16, column: 6 }}
            dataSource={data}
            renderItem={item => (
              <List.Item>
                <Card
                  hoverable
                  cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}
                >
                  <Meta
                    title="item.title"
                    description="www.instagram.com"
                  />
                </Card>
              </List.Item>
            )}
          />
        </Card>
      </div>
    )
  }
}
